<template>
  <div>
    <section id="cent">
      <div class="box">
        <div class="center1">
          <div class="logoText logo" >
            <img :src="logoImg" style="height: 100px"/>
          </div>
          <p class="logoText">{{languageData.header.logoText }}</p>
          <div class="saech">
            <el-input class="saechIput" v-model="input" :placeholder="fromBy=='web'?languageData.public.Ladingph:languageData.public.sechText" ></el-input>
            <el-button type="primary" class="saechBout"  icon="el-icon-search" v-on:click="sechlistFn()" > </el-button>
            <div >
              <el-collapse-transition>
                <div v-show="showBox"  class="listBox">
                  <div class="list"  v-show="!errorText" v-for="list in transport" v-on:click="goMap(list.id)" :key="list.id"
                       style=" text-align: left;border-bottom:1px solid #e1e1e1 ">
                    <span style="margin: 0px 20px">{{languageData.public.plalte}}：{{list.containerId}}</span>
                    <span>{{languageData.public.container}}：{{list.deviceNumber}}</span>
                  </div>
                  <p v-show="errorText">{{errorText}}</p>
                </div>
              </el-collapse-transition>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<style scoped>
  .H_ib_body {background: #e1e1e1 !important}
  #cent{ min-width: 960px}
  .saech{ width:555px;margin: auto;padding-top: 40px; position: relative}
  .box{width: 700px;height: 300px;position: absolute;top: 50%;left: 50%;}
  .center1{width: 700px;height: 300px;position: relative;top: -70%;left: -50%;}
  .logoText{text-align: center;color: #136eb4;font-size:32px;line-height: 50px;}
  .logo {margin: auto;font-size: 56px;font-weight: bold;letter-spacing:5px;padding-top: 10px;padding-bottom: 10px;}
  .saechIput{width: 480px;margin-right: 0px;position: relative;z-index: 10;}
  .saechBout{border-radius: 0px 4px 4px 0px;position: relative; left: -7px;z-index: 11;font-size: 14px;font-weight: bold;width: 67px;text-align: center}
  .saechBout:hover{background-color: #409eff;border-color: #409eff}
  .saechBout{background-color: #0e72b9; border-color: #0e72b9 }
  .listBox{background-color: #fff;width: 477px;border: 1px solid #e1e1e1;margin-top: 10px;padding:10px 0px; }
  .list{ cursor: pointer}

</style>
<script>
  import {mapActions, mapState} from 'vuex'
  import Public from '../vuex/public'
  import logoImg from '../../static/img/icon/logo180.png'
  export default {
    name: 'index2', // 组件名称
    created () {
      // 查看本页面路由
      this.check = this.$route.name
      // 查看有无登陆
      var userData = Public.publicLo.sessionStorageGet('user');
      this.fromBy = this.$route.query.companyNumber? 'web':'';
      console.log(this.fromBy)
      if(this.fromBy !='web'){
              // this.ndexId2 =0;
      }
      if (userData) {
        // 转换对象
        userData = JSON.parse(userData)
        // 渲染
        this.user = {
          nickName: userData.nickName,
          headImg: userData.headImg,
          id: userData.userId
        }
      }
    },
    data () { // 数据集合
      return {
        fromBy:'',
        boll: false,
        showBox: false,
        offset: -350,
        platform: null,
        behavior: null,
        defaultLayers: null,
        ui: null,
        list: [],
        user: {
          nickName: null,
          headImg: null,
          id: null
        },
        bubble: null,
        routeInstructionsContainer: null,
        input: null,
        logoImg: logoImg,
        errorText: ''
      }
    },
    methods: {
      ...mapActions({
        mapListFn: 'mapListFn',
        loginFn: 'loginFn',
        checkID: 'checkId',
        checkNumber: 'checkNumber',
        sechByBlill:'sechByBlill'
      }),
      // 函数集合
      goMap (id) {
        // 过滤垃圾数据
//        if (!list.id) return false
//        // 拼接参数
        var parm = {
          id: id
        }
        this.mapListFn(parm)
        this.$store.commit('shechDat', this.input)
        this.$store.commit('shechDatid', id)
      },
      // 查询列表
      sechlistFn () {
        this.showBox = !this.showBox;
        this.input = this.input.replace(/，/ig,',')
        var str = this.input
        this.$store.commit('transportListTo', null)
        if (!str) {  this.errorText = this.languageData.id=='Chinese'?'请输入搜索关键字':'No such data'; return }
        str = str.replace(/(^\s*)|(\s*$)/g, " ")
        if (!str) {
          this.errorText = this.languageData.id=='Chinese'?'请输入搜索关键字':'No such data'
          return
        }

        // 清空 vuex 列表
        var parm = {
          code: this.input
        }
        if (this.user.id) {
          this.checkNumber(parm)
        } else {
          if(this.fromBy == 'web'){
            var data = this.input.split(',');
            data = Public.publicLo.Deduplication(data)
            data = data.join(',');
            var parm = {billNumbers:data};
            this.sechByBlill(parm);
            this.$store.commit('shechDat', this.input)
          }else {this.checkID(parm)}
        }
      }
    },
    computed: {
      // 查询条件
      checkIdList: function () {
        var parm = this.shechIput
        var data = null
        if (parm) {
          data = parm
          this.firstSech = false // 隐藏
          this.listFn()
        }
        return data
      },
      languageData: function () {
        var parm = this.language
        if (parm) {
          if (parm.check == 'Chinese') {
            parm = parm.Chinese
          }
          if (parm.check == 'English') {
            parm = parm.English
//            dom.style = 'width:620px'
          }
//          // 替换 其他交互数据
//          this.updateDate(parm)
        }
        return parm
      },
      transport: function () {
        var parm = this.transportList || null
        if (parm) {
          if(parm.code == 1){
            this.errorText = this.languageData.id=='Chinese'?'暂无此类订单': 'No such data'
          }
          if(parm.code == -1){
            this.errorText = this.errorDate = this.languageData.id=='Chinese'?'数据请求异常，请稍后重试': 'Request error Please try again later'
          }
          if(parm.code == 0){
            this.errorText = null
          }
          parm = parm.body.data
        }else {
          this.errorText = null
        }
        return parm
      },
      ...mapState([
        'shechList',
        'language',
        'transportList'
      ])
    },
    mounted () {
      // 界面加载 完成 后的  类似 jq的 $(functiong(){ })
    },
    components: {
    }
  }
</script>

